<template>
  <guat-page-layout title="签到分组管理">
    <template #actions>
      <guat-button-group
        :buttons="[
          { internal: $config.$button.PLO, text: '筛选', onClick: () => setDrawerVisible(true) },
          { internal: $config.$button.PLR, text: '新增分组', onClick: handleAdd },
        ]"
      />
    </template>
    <guat-group-table />
    <guat-new-and-edit-modal :title>
      <guat-new-and-edit-form />
    </guat-new-and-edit-modal>
    <guat-search-drawer title="筛选分组">
      <guat-search-form />
    </guat-search-drawer>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { newGroupFormConfig } from "../form-config";
import { createGroupTableColumns } from "../table";

const isAdd = ref(true);
const title = computed(() => (unref(isAdd) ? "创建分组" : "编辑分组"));
const [GuatGroupTable, { setTableData }] = useTable(
  createGroupTableColumns({
    edit: handleEdit,
    del: handleDelete,
  })
);
const [GuatNewAndEditModal, { setModalVisible }] = useModal();
const [GuatNewAndEditForm, { setFormValue }] = useForm(newGroupFormConfig);
const [GuatSearchDrawer, { setDrawerVisible }] = useDrawer();
const [GuatSearchForm] = useForm([
  { label: "分组名称", field: "groupName", component: "Input" },
  {
    label: "当前状态",
    field: "groupStatus",
    component: "RadioGroup",
    options: [
      { label: "启用", value: 0 },
      { label: "禁用", value: 1 },
    ],
  },
]);

function handleAdd() {
  isAdd.value = true;
  setModalVisible(true);
}

function handleEdit() {
  isAdd.value = false;
  setFormValue({
    groupName: "2022级",
    groupStatus: 0,
  });
  setModalVisible(true);
}

function handleDelete() {}

onMounted(() => {
  setTableData([
    {
      name: "2022级",
      createTime: "2023-04-10 22:00:00",
      numberOfMember: 10,
      status: 0,
    },
    {
      name: "2021级",
      createTime: "2023-04-10 22:00:00",
      numberOfMember: 10,
      status: 1,
    },
  ]);
});
</script>

<style scoped></style>
